<div class="box box-primary">
    <div class="box-header">
        <div class="box-title">
            <label for="">自愿锁定期查询</label>
            <!-- <button type="submit" class="btn btn-default" (click)="toggleModal()">打印本页</button> -->
        </div>
    </div>
    <div class="box box-body">
        <!-- 查询条件 -->
        <form class="form-inline">
            <div class="form-group ext-from-item">
                <label for="vcFundCode">组合代码：</label>
                <input type="text" class="form-control" id="vcFundCode" name="vcFundCode" [(ngModel)]="searchBody.vcFundCode" placeholder="组合代码">
            </div>
            <div class="form-group ext-from-item">
                <label for="vcFundName">组合名称：</label>
                <input type="text" class="form-control" id="vcFundName" name="vcFundName" [(ngModel)]="searchBody.vcFundName" placeholder="组合名称">
            </div>
            <div class="form-group ext-from-item">
                <label for="vcStockCode">证券代码：</label>
                <input type="text" class="form-control" id="vcStockCode"  name="vcStockCode" [(ngModel)]="searchBody.vcStockCode" placeholder="证券代码">
            </div>
            <div class="form-group ext-from-item">
                <label for="vcStockName">证券名称：</label>
                <input type="text" class="form-control" id="vcStockName" name="vcStockName" [(ngModel)]="searchBody.vcStockName" placeholder="证券名称">
            </div>
            <div class="form-group ext-from-item">
                <label>中签日：</label>
                <input type="text" class="form-control" id="reservation" placeholder="中签日">
            </div>
            <div class="form-group ext-from-item">
                <button type="submit" class="btn btn-primary"  (click)="getLockQueryList()">查询</button>
                <button type="submit" class="btn btn-warning" (click)="resetSearch()">重置</button>
            </div>
        </form>
        <!-- 查询条件 END-->
        <!-- 列表-->
        <table class="table table-bordered">
            <tr>
                <th>组合代码</th>
                <th>组合名称</th>
                <th>证券代码</th>
                <th>证券名称</th>
                <th>中签日期</th>
                <th>锁定开始时间</th>
                <th>锁定结束时间</th>
                <th>自愿锁定期（月）</th>
                <th>剩余时间（天）</th>
            </tr>
            <tr *ngFor="let x of list">
                <td>
                    <!-- 组合代码 -->
                    {{x.vcFundCode}}
                </td>
                <td>
                    <!-- 组合名称 -->
                    {{x.vcFundName}}
                </td>
                <td>
                    <!-- 证券代码 -->
                    {{x.vcStockCode}}
                </td>
                <td>
                    <!-- 证券名称 -->
                    {{x.vcStockName}}
                </td>
                <td>
                    <!-- 中签日期 -->
                    {{x.enRatioDate}}
                </td>
                <td>
                    <!-- 锁定开始时间 -->
                    {{x.vcFreeStartDate}}
                </td>
                <td>
                    <!-- 锁定结束时间 -->
                    {{x.vcFreeEndDate}}
                </td>
                <td>
                    <!-- 自愿锁定期（月） -->
                    {{x.lFreePeriod}}
                </td>
                <td>
                    <!-- 剩余时间（天） -->
                    {{x.residueDate}}
                </td>
            </tr>
             <!--<tr>-->
                <!--<td>110241</td>-->
                <!--<td>组合名称组合名称</td>-->
                <!--<td>金太阳</td>-->
                <!--<td>2017-3-1</td>-->
                <!--<td>2017-3-1</td>-->
                <!--<td>2018-3-1</td>-->
                <!--<td><a style="color: red;" (click)="toggleModal()">0</a></td>-->
                <!--<td>120天</td>-->
            <!--</tr>-->
        </table>
        <!-- 列表 END-->
        <!-- 分页 Begin -->
            <app-pagination
            [currentPageNum]="pageInfo.currentPageNum"
            [pagesShow]="pageInfo.pagesShow"
            [totalPages]="pageInfo.totalPages"
            (pageChanged)="pageNavigation($event)">
            <div class="pull-left pagination-detail" data-pagination-additional="true">
                <span class="pagination-info">
                    当前显示第{{pageInfo.startRow}}到第{{pageInfo.endRow}}条&nbsp;&nbsp;&nbsp;&nbsp;总共{{pageInfo.total}}条
                </span>
                <span class="page-list">
                    <span class="btn-group dropup">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="page-size">{{pageInfo.pageSize}}</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li *ngFor="let i of pageInfo.pageList" role="menuitem"
                                [class.active]="pageInfo.pageSize === i"
                                (click)="pageSizeChange(i)">
                            <a href="javascript:void(0)">{{i}}</a>
                            </li>
                        </ul>
                    </span> 
                    条记录每一页
                </span>
            </div>
        </app-pagination>
        <!-- 分页 End -->
    </div>
</div>
<!-- 自愿锁定期 -->
<div class="modal fade" id="lockTimeModal" tabindex="-1" role="dialog" aria-labelledby="自愿锁定期">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">自愿锁定期</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="form-group ext-from-item">
                        <label for="zhName">中签文件数据：12（月）</label>
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="stockName">万德数据：0（月)</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 自愿锁定期 END-->
